<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>应用</title>
        <link rel="stylesheet" href="fonts/iconfont.css"/>
        <link rel="stylesheet" href="css/font.css"/>
        <link rel="stylesheet" href="css/weui.min.css"/>
        <link rel="stylesheet" href="css/jquery-weui.min.css"/>
        <link rel="stylesheet" href="css/mui.css"/>
        <link rel="stylesheet" href="css/animate.css"/>
        <link rel="stylesheet" href="css/pages/app.css"/>
        <script>
        (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
            };

          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
    </head>
    <body>
        <header>
            <div class="titlebar reverse">
                
                <h1>应用</h1>
            </div>
        </header>
        <article style="padding-bottom: 54px;padding-top:44px;">
            <div class="list-wrap">
                <div class="ying-b">
                   <div class="yb-z jia">待办事项</div>
                   <div class="yb-z">已办事项</div>
                </div>
                <ul class="dbsx">
                   <li><span style="color:#666;">0518</span><span>还有一些事情没晨晨蝴蝶有做</span></li>
                   <li><span style="color:#666;">0518</span><span>还有一些事情没晨晨蝴蝶有做</span></li>
                   <li><span style="color:#666;">0518</span><span>还有一些事情没晨晨蝴蝶有做</span></li>
                   <li><span style="color:#666;">0518</span><span>还有一些事情没晨晨蝴蝶有做有做</span></li>
                </ul>
                <ul class="dbsx" style="display:none">
                   <li>5</li>
                   <li>6</li>
                   <li>7</li>
                   <li>8</li>
                </ul>
            </div>

            <div class="list-wrap">
                <div class="ying-b">
                   <div class="yb-z jia">工作日志</div>
                   <div class="yb-z">日程安排</div>
                </div>
                <ul class="dbsx">
                   <li><span>还有一些事情没晨晨蝴蝶有做</span></li>
                   <li><span>还有一些事情没晨晨蝴蝶有做</span></li>
                   <li><span>还有一些事情没晨晨蝴蝶有做</span></li>
                   <li><span>还有一些事情没晨晨蝴蝶有做</span></li>
                </ul>
                <ul class="dbsx" style="display:none">
                   <li>5</li>
                   <li>6</li>
                   <li>7</li>
                   <li>8</li>
                </ul>
            </div>

            <div class="list-wrap">
                <div class="ying-b">
                   <div class="yb-z jia">未读邮件</div>
                   <div class="yb-z">通知公告</div>
                </div>
                <ul class="dbsx">
                   <li><span>还有还有一些事情没晨晨蝴蝶有做没有做</span></li>
                   <li><span>还有一些事情没晨晨蝴蝶有做</span></li>
                   <li><span>还有一些事还有一些事情没晨晨蝴蝶有做有做</span></li>
                   <li><span>还还有一些事情没晨晨蝴蝶有做事情没有做</span></li>
                </ul>
                <ul class="dbsx" style="display:none">
                   <li>5</li>
                   <li>6</li>
                   <li>7</li>
                   <li>8</li>
                </ul>
            </div>
        </article>
        <footer>
            <ul class="menubar animated fadeInUp delay3">
                <li class="tab" onclick="window.location='notice.html'">
                    <i class="iconfont">&#xe63c;</i>
                    <label class="tab-label">公告</label>
                    <span class="point"></span>
                 
                </li>
                <li class="tab" onclick="window.location='tasks.html'">
                    <i class="iconfont">&#xe63d;</i>
                    <label class="tab-label">任务</label>
                    <span class="point"></span>
                </li>
                <li class="tab active" onclick="window.location='index.html'">
                    <i class="iconfont">&#xe63f;</i>
                    <label class="tab-label">应用</label>
                    <span class="point"></span>
                </li>
                <li class="tab" onclick="window.location='self.html'">
                    <i class="iconfont">&#xe63e;</i>
                    <label class="tab-label">我</label>
                </li>
            </ul>
        </footer>
    </body>
    <script src="js/jquery.js"></script>
    <script>
      $('.yb-z').click(function(){
		  $(this).addClass('jia');
		  $(this).siblings().removeClass('jia');
		  var index=$(this).index();
		  $(this).parent().siblings('.dbsx').hide().eq(index).show();
		 
		  });

	  
    </script>
</html>